<template>
  <div class="scenecont">
    <div style="width: 1200px; margin: 0 auto">
      <!-- 面包屑 -->
      <a-breadcrumb class="Allbreadcrumb" separator=">">
        <a-breadcrumb-item>
          <a href="/">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item><a href="/employment/home">创业就业</a>
        </a-breadcrumb-item>
        <a-breadcrumb-ite style="color: #ffbe37">职位详情</a-breadcrumb-ite>
      </a-breadcrumb>
      <!-- 企业简介 -->
      <div class="screen">
        <div class="companyconttop">
          <div class="displayinline jydetail">
            <p class="txt1">
              移动产品部-UI/UE设计师
            </p>
            <p class="txt2">
              研究生以上 ｜ 1-3年经验 ｜ 	肢体残疾/一级（重度） ｜  正式
            </p>
            <p class="fulip">
              <span class="fulibtn">五险一金</span><span class="fulibtn">免费三餐</span><span class="fulibtn">15天年假</span>
            </p>
            <p class="txt3">
              2021/12/12发布
            </p>
            <p class="txt4">
              10k-12k/月
            </p>
            <div class="btngxqstyle">
              <button class="gxqbtn"  v-if="!collectFlage" @click="collectFlag()">
                <a-icon type="star" style="color: #ffbe37" /> 感兴趣
              </button>
              <button class="gxqbtn"
                v-else
                @click="collectFlag()"
              >
                <a-icon type="star" style="color: #ffbe37" /> 已感兴趣
              </button>
            </div>

          </div>
        </div>
      </div>

      <!-- 职位描述 -->
      <!-- 创业、就业、教育 -->
      <div class="bottomcont">
        <!-- 创业项目 -->
        <div class="leftwarp">

          <div class="cyxmcon">
            <div>
              <h1><span class="bjtitle"></span>职位描述</h1>
              <p class="mt23">教育心理学博士，博士级国际认证行为分析师（BCBA-D），乔治梅森大学兼职讲师以及督导老闭症儿童的自我管理、情绪调节、大脑执行功能、语言行为、以及教师培训、教师教育功效等。目前是多个教育协会的成员，曾在学术会议中多次做学术报告。教育心理学博士，博士级国际认证行为分析师（BCBA-D），乔治梅森大学兼职讲师以及督导老闭症儿童的自我管理、情绪调节、大脑执行功能、语言行为、以及教师培训、教师教育功效等。目前是多个教育协会的成员，曾在学术会议中多次做学术报告。</p>
            </div>
            <div class="mt23">
              <h1><span class="bjtitle"></span>工作地点</h1>
              <p class="txt65">北京市北京去科技大学园</p>
            </div>
            <div class="mt23">
              <h1><span class="bjtitle"></span>该公司其他岗位</h1>
              <ul class="qitagw">
                <li>
                  <p class="txt61">高级产品经理/产品总监</p>
                  <p class="mt20">
                    <span class="txt62">10k-12k/月备份</span> <span class="txt63">学历不限 ｜ 1-3年 ｜ 肢体残疾</span>
                  </p>
                  <p class="mt20"><span class="fulibtn">五险一金</span><span class="fulibtn">免费三餐</span><span class="fulibtn">15天年假</span></p>
                </li>
                <li>
                  <p class="txt61">高级产品经理/产品总监</p>
                  <p class="mt20">
                    <span class="txt62">10k-12k/月备份</span> <span class="txt63">学历不限 ｜ 1-3年 ｜ 肢体残疾</span>
                  </p>
                  <p class="mt20"><span class="fulibtn">五险一金</span><span class="fulibtn">免费三餐</span><span class="fulibtn">15天年假</span></p>
                </li>
                <li>
                  <p class="txt61">高级产品经理/产品总监</p>
                  <p class="mt20">
                    <span class="txt62">10k-12k/月备份</span> <span class="txt63">学历不限 ｜ 1-3年 ｜ 肢体残疾</span>
                  </p>
                  <p class="mt20"><span class="fulibtn">五险一金</span><span class="fulibtn">免费三餐</span><span class="fulibtn">15天年假</span></p>
                </li>
              </ul>
            </div>
          </div>


        </div>
        <!-- 就业项目 -->
        <div class="jyxmcon">
          <div class="pltop">
            <img class="iconmr" src="@/assets/image/competition/zwicon.png" alt="">相似岗位
          </div>
          <div class="jyxxcon">
            <ul class="xsgwul">
            	<li>
                <p class="txt71">高级产品经理/产品总监</p>
                <p class="txt72">学历不限	｜	1-3年	｜	肢体残疾</p>
                <div class="mt16">
                  <img src="@/assets/image/competition/qylogo2.png" alt="">
                  <div class="displayinline  ml8">
                    <p class="txt78">北京隆盛佳创科技有限公司</p>
                    <p class="txt77">民营 | 互联网/通讯/电子 | 100人以下</p>
                  </div>
                </div>
                <p class="txt70">50-60K</p>
                <span class="zwhr"></span>
              </li>
              <li>
                <p class="txt71">高级产品经理/产品总监</p>
                <p class="txt72">学历不限	｜	1-3年	｜	肢体残疾</p>
                <div class="mt16">
                  <img src="@/assets/image/competition/qylogo2.png" alt="">
                  <div class="displayinline  ml8">
                    <p class="txt78">北京隆盛佳创科技有限公司</p>
                    <p class="txt77">民营 | 互联网/通讯/电子 | 100人以下</p>
                  </div>
                </div>
                <p class="txt70">50-60K</p>
                <span class="zwhr"></span>
              </li>
              <li>
                <p class="txt71">高级产品经理/产品总监</p>
                <p class="txt72">学历不限	｜	1-3年	｜	肢体残疾</p>
                <div class="mt16">
                  <img src="@/assets/image/competition/qylogo2.png" alt="">
                  <div class="displayinline  ml8">
                    <p class="txt78">北京隆盛佳创科技有限公司</p>
                    <p class="txt77">民营 | 互联网/通讯/电子 | 100人以下</p>
                  </div>
                </div>
                <p class="txt70">50-60K</p>
                <span class="zwhr"></span>
              </li>

            </ul>
          </div>
        </div>


      </div>


    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: "1",
        activeKey:'1',
        collectFlage: false,
      }
    },

    watch: {

    },
    mounted() {


    },
    methods: {
      // 收藏功能,暂时不全
      collectFlag(e) {
        console.log(e)
        this.collectFlage = !this.collectFlage;
      },
    }
  }
</script>

<style scoped="scoped">
  .txt1 {
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    margin-bottom: 14px;
    line-height: 50px;
    margin-top: 20px;
  }

  .zwhr{
        display: block;
        width: 308px;
        height: 1px;
        border: 1px solid #EEEEEE;
        position: absolute;
        bottom: 10px;
  }

  .ml8{
    margin-left: 16px;
  }

  .txt77{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 17px;
    -webkit-background-clip: text;
  }

  .txt78{
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    -webkit-background-clip: text;
  }

  .xsgwul>li{
    width: 340px;
    height: 152px;
    background: #FFFFFF;
    position: relative;
    padding: 16px;
  }

  .iconmr{
    margin-right: 8px;
    vertical-align: middle;
  }

  .mt23{
    margin-top: 32px;
  }

  .txt65{
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFBE37;
    margin-top: 16px;
  }

  .txt63{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .txt61{
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
        margin-top: 20px;
  }

  .mt16{
    margin-top: 16px;
  }

  .txt62{
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFBE37;
  }

  .qitagw>li{
    width: 800px;
    height: 165px;
    background: #FFFFFF;
    box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 7%);
    margin: 20px 0;
        padding: 20px;
  }

  .fulip{
    margin-top: 18px;
  }

  .txt71{
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  .txt72{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-top: 16px;
  }

  .fulibtn{
    padding: 3px 10px;
        border: 1px solid #ccc;
        border-radius: 0;
        color: #999;
        margin-right: 16px;
        display: inline-block;
  }

  .txt4{
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFBE37;
    position: absolute;
    right: 48px;
    top:79px;
  }

  .btngxqstyle{
    position: absolute;
    right: 32px;
    top:135px;
  }

  .companydetail p{
    margin:0 0 20px 0;
  }

  h1{
    font-weight: bold;
  }

  .frl{
    float: right;
        margin-top: 10px;
  }

  .jydetail{
    margin-left: 20px;
  }

  .border50 {
    width: 24px;
    height: 24px;
    background-color: rgba(216, 216, 216, 1);
    border-radius: 50%;
    display: inline-block;
    vertical-align: sub;
    margin-right: 8px;
  }

  .cybq{
    display: inline-block;
    width: 78px;
    height: 23px;
    background: url(~@/assets/image/competition/biaoqian1.png) no-repeat;
    text-align: center;
    line-height: 23px;
        color: rgba(35, 45, 50, 1);
        font-size: 12px;
        font-family: PingFangSC-Medium;
  }

  .gxqbtn{
    width: 120px;
    height: 40px;
    background: rgba(255, 190, 55, 0.18);
    border-radius: 4px;
    border: 1px solid #FFBE37;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    cursor: pointer;
  }

  .bjtitle{
    width: 2px;
    height: 10px;
    background: #FFBE37;
    display: inline-block;
        margin-right: 4px;
  }

  .txt70{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFBE37;
    position: absolute;
    right: 16px;
    top:16px;
  }

  .txt2{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-bottom: 14px;
  }

  .txt3{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-top: 20px;
  }

  .jyxxul{
    padding: 16px 0;
  }

  .jyxxul>li{
    position: relative;
    padding: 8px 0;
    margin-bottom: 24px;
  }

  .lineh1{
    line-height: 26px;
  }

  .txt8{
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-top: 12px;
  }

  .txt9{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .pltop{
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 34px;
    padding: 24px;
    /* border-bottom: 1px solid #D8D8D8; */
  }

  .txt7{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-top: 19px;
  }

  .jyimgw{
    width: 180px;
    height: 120px;
  }

  .cyimgw{
    width: 158px;
    height: 90px;
  }

  .mt12{
    margin-top: 12px;
  }

  .txt6{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .txt5{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-top: 4px;
  }


  .displayinline2{
    display:inline-block;
    vertical-align: top;
  }

  .jyxmcon{
    width: 340px;
    height: 398px;
    background: #FFFFFF;
    display: inline-block;
    margin-left: 79px;
  }

  .leftwarp{
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    width: 760px;
  }

  .jypxcon{
    width: 760px;
    height: 522px;
    background: #FFFFFF;
    margin-top: 20px;
    padding: 24px;
  }

  .bottomcont{
    width: 1200px;
    margin-top: 20px;
  }

  .cyxmcon{
    width: 840px;
    height: 1031px;
    background: #FFFFFF;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    padding: 24px;
  }

  .mt20 {
    margin: 20px 0
  }

  .scenecont {
    background: #F5F6FA;
    padding-bottom: 20px;
  }

  .h1title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-top: 24px;
  }

  .companydetail {
    width: 1200px;
    height: 480px;
    background: #FFFFFF;
    margin-top: 20px;
    padding: 24px;
  }

  ::-webkit-scrollbar-track-piece {

    border-radius: 6px;
    background-color: #ccc;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #eee;
    background-clip: padding-box;
    min-height: 28px;
  }

  .displayinline {
    display: inline-block;
    vertical-align: top;
  }

  .buttonstyle {
    width: 180px;
    height: 40px;
    background: #FFBE37;
    border-radius: 20px;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 40px;
  }

  .qiyeimg {
    width: 360px;
    height: 320px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    border: 1px solid #D9D9D9;
  }

  .screen {
    width: 1200px;
    height: 205px;
    background: #FFFFFF;
  }

  .companyconttop {
    /* width: 1200px;
    height: 128px;
    background: url(~@/assets/image/competition/companylogo.png) rgba(19, 41, 84, 0.2); */
    /* padding: 24px 32px; */
    position: relative;
  }



  /deep/ .ant-tabs-nav .ant-tabs-tab:last-child {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  /deep/ .ant-tabs-nav .ant-tabs-tab-active {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600 !important;
    color: #1A1A1A;
    text-shadow: none;
  }

  /deep/ .ant-tabs-nav .ant-tabs-tab {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  /deep/ .ant-tabs-ink-bar {
    background-color: #1A1A1A;
  }

  /deep/ .ant-tabs-bar {
    border-bottom: 1px solid #D8D8D8;
  }
</style>
